<template>
  <view class="content">
    <van-nav-bar :title="titleName" left-text="" :left-arrow="true" placeholder fixed @click-left="onClickLeft" />
    <view class="goods">
      <ScreenPage @chooseTag="chooseTag" />
      <QueryPage></QueryPage>
      <Scrollbox className="good-cont" @lowerFun="getList" :otherHeight="280">
        <template #contScrollBox>
          <view style="display: flex; flex-wrap: wrap; width: 100%; margin: 0 -9rpx">
            <view class="good-item" v-for="item in list" :key="item.goods_id">
              <GoodList :info="item"></GoodList>
            </view>
          </view>
        </template>
      </Scrollbox>
    </view>
  </view>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import GoodList from '@/components/good/index'
import TitlePage from '@/components/title/index'
import ScreenPage from '@/components/screen/index'
import QueryPage from '@/components/query/index'
import Scrollbox from '@/components/scrollbox/index'
import { goodList } from '@/http/goods'
export default {
  components: {
    GoodList,
    TitlePage,
    ScreenPage,
    QueryPage,
    Scrollbox,
  },
  setup() {
    const state = reactive({
      isOpen: false,
      titleName: '',
      listQuery: {
        tag_id: '',
        keyword: '',
        classify: '',
        goods_type: '',
        age_type: '',
        publish_date_type: '',
        is_whole: '',
        take_nums_type: '',
        page: 1,
      },
      list: [],
      otherHeight: 370,
      isEnd: false,
    })
    const onClickLeft = () => {
      uni.navigateBack({
        delta: 1,
      })
    }
    onLoad((option) => {
      state.titleName = option.name
      chooseTag()
    })
    const getList = async () => {
      if (state.isEnd) return
      try {
        let data = await goodList(state.listQuery)
        const { list, total_page } = data.data
        state.list = state.listQuery.page === 1 ? list : state.list.concat(list)

        if (list.length === 0 || total_page === state.listQuery.page) {
          state.isEnd = true
        } else {
          state.listQuery.page++
        }
      } catch (e) {
        state.isRefresh = false
        state.loading = false
      }
    }
    const initLoading = () => {
      state.isEnd = false
      state.listQuery.page = 1
      state.list = []
      getList()
    }
    // 选择分类标签
    const chooseTag = (data = '') => {
      state.listQuery.goods_type = state.titleName === '出售库存' ? 1 : 2
      state.listQuery.classify = data
      initLoading()
    }
    const changeQuery = (data) => {
      state.listQuery = { ...state.listQuery, ...data }
      initLoading()
    }
    return {
      ...toRefs(state),
      onClickLeft,
      chooseTag,
      changeQuery,
      getList,
      initLoading,
    }
  },
}
</script>

<style lang="scss">
.content {
  background: linear-gradient(180deg, #d0e8ff 0%, rgba(208, 232, 255, 0) 60%, rgb(255, 255, 255) 100%);
  height: 100vh;
}
.goods {
  position: relative;
}
:deep(.screen-cross) {
  border-radius: 0 !important;
}
.good-cont {
  padding: 0 24rpx;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -9rpx;
  background: #fff;
  overflow-y: auto;
  &.over {
    overflow-y: hidden;
  }
  .good-item {
    width: calc(50% - 18rpx);
    margin: 0 9rpx 24rpx;

    :deep(.item-box) {
      padding: 16rpx 14rpx 10rpx;
    }
  }
}
.good-select {
  padding: 0 10rpx 30rpx;
  margin-bottom: 10rpx;
  position: relative;
  .select-box {
    display: flex;
    span {
      display: block;
      min-width: 80rpx;
      text-align: center;
      padding: 5rpx 30rpx;
      font-size: 12rpx;
      margin-right: 20rpx;
      border-radius: 30rpx;
      background: #ededed;
    }
  }
}
</style>
